User's Guide
Mobile and Web Components
UX
Controls
Other Controls
Button
Prevent an Event From Firing Twice when a User Double Clicks on a Button

Prevent an Event From Firing Twice when a User Double Clicks on a Button

Description

Buttons are frequently tied to a javascript action, such as an Ajax callback, that fires when a user clicks on the button. As users might accidentally click on a button more than once, it is desirable to avoid causing any event bound to the button from firing twice.

You can add the following code to a button's onClick event in order to prevent multiple clicks from causing the action tied to the onClick event from firing multiple times. The last line of code is the actual callback.

if(typeof {dialog.object}._locked == 'undefined') {
     {dialog.object}._locked = true;
     setTimeout(function() { delete {dialog.object}._locked },1000);
     {grid.Object}.ajaxCallback('G','{Grid.RowNumber}:all','foo','',''); 
}

First the 'if' statement in this example looks to see if there is a variable named '_locked' defined in the dialog object and if that variable exists. If the variable does not exist, i.e. it is 'undefined', then the variable will be set to 'true'. A setTimeout() function is then called to delete the variable in one second (1000 ms), an arbitrary interval. After the setTimeout() function is called the Ajax callback is finally executed. When a user double clicks on the button the first click they make will be interpreted. In this case, the variable, '_locked', will be 'undefined', the setTimeout() function will fire, and the callback will take place. When the second click is received, however, the variable will no longer be 'undefined', it will be 'true', and so the callback will not take place. This process is also described in this video.

In Practice

This example will prevent a call to the console log from firing twice, if the button tied to the action is double clicked. The call to the console log will be used to check date information.

In the UX Builder on the UX Controls page open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.
Highlight the button control in the controls tree. Scroll down the properties list on the right to the 'Javascript' section. Click on the [...] button next to the 'onClick' property.

In the 'Edit onClick Event' dialog set the editing mode to the 'Text mode' radio button option. Add the following code to the onClick event definition and click OK.

if(typeof {dialog.object}._locked == 'undefined') {
{dialog.object}._locked = true;
setTimeout(function() { delete {dialog.object}._locked },1000);
console.log('click '+Date.now());
}

Click the browser button in the main toolbar to run the component in Firefox.
Expand the browser menu and open the developer section.
Click on 'Web Console' to open the web console window.
Click on the component button. You should see one click event appear in the Console.
Double click on the button. Only one new click event should appear in the Console.